1import {useState, useMemo, PropsWithChildren} from 'react';
 2import EventLayout, {TabComponent} from '../../../layouts/Event';
 3import {EventByUuidDocument} from '../../../generated/graphql';
 4import useProfile from '../../../hooks/useProfile';
 5import WaitingList from '../../../containers/WaitingList';
 6import {AddPassengerToWaitingList} from '../../../containers/NewPassengerDialog';
 7import pageUtils from '../../../lib/pageUtils';
 8
 9interface NewPassengerDialogContext {
10  addSelf: boolean;
11}
12
13interface Props {
14  eventUUID: string;
15  announcement?: string;
16}
17
18const Page = (props: PropsWithChildren<Props>) => {
19  return <EventLayout {...props} Tab={WaitingListTab} />;
20};
21
22const WaitingListTab: TabComponent = ({event}) => {
23  const {userId} = useProfile();
24  const [addPassengerToWaitingListContext, toggleNewPassengerToWaitingList] =
25    useState<NewPassengerDialogContext | null>(null);
26
27  const canAddSelf = useMemo(() => {
28    if (!userId) return false;
29    const isInWaitingList = event?.waitingPassengers?.data?.some(
30      passenger => passenger.attributes.user?.data?.id === `${userId}`
31    );
32    const isInTravel = event?.travels?.data?.some(travel =>
33      travel.attributes.passengers?.data?.some(
34        passenger => passenger.attributes.user?.data?.id === `${userId}`
35      )
36    );
37    return !(isInWaitingList || isInTravel);
38  }, [event, userId]);
39
40  return (
41    <>
42      <WaitingList
43        canAddSelf={canAddSelf}
44        getToggleNewPassengerDialogFunction={(addSelf: boolean) => () =>
45          toggleNewPassengerToWaitingList({addSelf})}
46      />
47      {!!addPassengerToWaitingListContext && (
48        <AddPassengerToWaitingList
49          open={!!addPassengerToWaitingListContext}
50          toggle={() => toggleNewPassengerToWaitingList(null)}
51          addSelf={addPassengerToWaitingListContext.addSelf}
52        />
53      )}
54    </>
55  );
56};
57
58export const getServerSideProps = pageUtils.getServerSideProps(
59  async (context, apolloClient) => {
60    const {uuid} = context.query;
61    const {host = ''} = context.req.headers;
62    let event = null;
63
64    // Fetch event
65    try {
66      const {data} = await apolloClient.query({
67        query: EventByUuidDocument,
68        variables: {uuid},
69      });
70      event = data?.eventByUUID?.data;
71    } catch (error) {
72      return {
73        notFound: true,
74      };
75    }
76
77    return {
78      props: {
79        eventUUID: uuid,
80        metas: {
81          title: event?.attributes?.name || '',
82          url: `https://${host}${context.resolvedUrl}`,
83        },
84      },
85    };
86  }
87);
88
89export default Page;